<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="referrer" content="never" />
  <title>综合案例</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .container {
      width: 1200px;
      margin: 0 auto;
    }

    .video video {
      width: 80%;
      padding: 20px 0;
    }

    .elevator {
      position: fixed;
      top: 280px;
      right: 20px;
      z-index: 999;
      background: #fff;
      border: 1px solid #e4e4e4;
      width: 60px;
    }

    .elevator a {
      display: block;
      padding: 10px;
      text-decoration: none;
      text-align: center;
      color: #999;
    }

    .elevator a.active {
      color: #1286ff;
    }

    .outline {
      padding-bottom: 300px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="header">
      <a href="http://pip.itcast.cn">
        <img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
      </a>
    </div>
    <div class="video">
      <video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
    </div>
    <div class="elevator">
      <a href="javascript:;" data-ref="video">视频介绍</a>
      <a href="javascript:;" data-ref="intro">课程简介</a>
      <a href="javascript:;" data-ref="outline">评论列表</a>
    </div>
  </div>
  <script src="./lodash.min.js"></script>
  <script>
     // ontimeupdate 播放每一秒都会多次触发这个事件(触发频率非常高)
     // onloadeddata 页面加载完毕视频播放标签就会触发(一般就是页面打开的时候)
     //    用addEventLisrener绑定事件时,大都不带on

     // 获取元素
     const video = document.querySelector('video');

     // 绑定事件 - ontimeupdate 播放每一秒都会多次触发这个事件
     //      防抖就是:单位时间内多次触发以最后一次为准.
     //      节流就是:单位时间内多次触发以第一次为准.
     video.addEventListener('timeupdate',_.throttle(function(){
       console.log('timeupdate');
       // 实时保存当前播放到了哪里
       localStorage.setItem('myTime',video.currentTime);
     },3000))
     // 绑定事件 - onloadeddata 页面加载完毕视频播放标签就会触发(一般就是页面打开的时候)
     video.addEventListener('loadeddata',function(){
      //  设置上一次播放结束的位置.
       video.currentTime = localStorage.getItem('myTime') || 0;
     })

     
  </script>
</body>

</html>